<template>
  <div>
    <h3>KlausSchaefers/quant-ux</h3>
    <p>包含低代码令牌的共享和评论功能。</p>

    <!-- 模拟令牌管理 -->
    <div class="token-section">
      <h4>令牌管理</h4>
      <button @click="createToken">创建令牌</button>
      <ul v-if="tokens.length > 0">
        <li v-for="(token, index) in tokens" :key="index">{{ token }}</li>
      </ul>
    </div>

    <!-- 模拟评论系统 -->
    <div class="comment-section">
      <h4>评论系统</h4>
      <input v-model="newComment" placeholder="输入评论" />
      <button @click="addComment">添加评论</button>
      <ul v-if="comments.length > 0">
        <li v-for="(comment, index) in comments" :key="index">{{ comment }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟令牌数据
const tokens = ref([]);
const createToken = () => {
  const newToken = `TOKEN_${Date.now()}`;
  tokens.value.push(newToken);
};

// 模拟评论数据
const comments = ref([]);
const newComment = ref('');
const addComment = () => {
  if (newComment.value.trim()) {
    comments.value.push(newComment.value);
    newComment.value = '';
  }
};
</script>

<style scoped>
.token-section,
.comment-section {
  margin-bottom: 20px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}

input {
  padding: 5px;
  margin-right: 10px;
}
</style>